<template>
  <el-popover placement="top-start" title="Title" :width="260" trigger="hover">
    <template #reference>
      <el-button>Hover to activate</el-button>
    </template>

    <div>
      <input class="hidden" ref="input" @change="onFileChange" type="file"/>
      <el-button type="primary" class="margin-right"
                 :loading="loading" @click.stop="$refs.input.click()">点击上传
      </el-button>
    </div>
    <div v-for="(item, idx) in fileList" :key="idx" class="sea-file-picker-item">
      <a style="margin-right: 16px">
        <i class="fa fa-file-o"></i> {{ item.name || '文件' }}
      </a>
    </div>

    <label v-if="cleanable" title="导入之前，清理此前已有的数据">
      <el-checkbox v-model="setting.clearHistorical">清除历史数据</el-checkbox>
    </label>
    <div>
      <small>{{ tips }}</small>
      <a v-if="template" title="点击下载文件上传所需的基础模版..."
         class="pull-right" @click="downloadTemplate">
        文件模版 >
      </a>
      <div class="clearfix"></div>
    </div>
  </el-popover>
</template>
<script>
/* eslint-disable */
import Layers from "@/lang/layers/index";

/**
 * Excel导入按钮
 *
 * 业务上请使用当前组件，方便统一调整界面布局；
 *
 * 这是一个业务上使用的组件，包含了文件上传、模版下载、是否清除历史，等常用字段。
 * 后台一般也是按照统一标准设计的，与当前组件做对接适配即可。
 */
export default {
  name: "SeaBtnExcel"
  , props: {
    // 按钮名称
    text: {type: String, default: undefined}
    // 图标
    , icon: {type: String, default: undefined}
    // 标题
    , title: {type: String, default: undefined}

    // 面板宽度
    , width: {type: String, default: '200'}
    // 位置
    , placement: {type: String, default: 'bottom-end'}

    // 文件模版下载地址
    , template: {type: String, default: undefined}
    // 提示性语句
    , tips: {type: String, default: '格式：xls、xlsx'}
    // 允许客户勾选数据清理（导入新的数据，清除历史数据）
    , cleanable: {type: Boolean, default: true}

    // 文件上传
    , upload: {type: Function, default: undefined}
  }
  , data() {
    return {
      // 文件列表
      fileList: []
      // 是否处在加载状态
      , loading: false
      // 文件配置信息
      , setting: {
        // 是否清除历史数据
        clearHistorical: false
      }
    }
  }
  , methods: {
    /**
     * 下载Excel模版
     */
    downloadTemplate: function () {
      if (this.template !== undefined) {
        window.open(this.template);
      }
    },
    /**
     * 用户选择了新的文件
     *
     * @param event change事件对象实例
     */
    onFileChange(event) {
      try {
        if (this.upload === undefined) {
          return;
        }

        this.loading = true;
        let files = event.target.files;

        let ret = Layers.sequentialPromise((resolve, i) => {
          this.upload(files[i], this.setting).then(item => {
            this.fileList.push(item);
            resolve();
          })
        }, 0, files.length);

        ret.then(() => {
          this.onChange(this.fileList);
          // 完成所有文件的提交，关闭加载条
          this.loading = false
          event.target.value = '';
        });
      } catch (e) {
        console.error(e);
        // 触发异常，关闭加载条
        this.loading = false
        event.target.value = '';
      }
    }
  }
}
</script>

<style scoped>
.sea-chk-box {
  cursor: pointer;
  font-size: small;
  margin: 6px 0;
  display: block
}
</style>